<template>
  <div class="deviceManageContont">
    <div class="dev-box restart" style="background-color: #FFCC33;" @click="systemOperation('restart')">
      <i class='el-icon-refresh-right dev-icon'></i><span class="dev-text">{{$t('重启系统')}}</span>
    </div>
    <div class="dev-box close " style="background-color: #FF3333;" @click="systemOperation('close')">
      <i class='el-icon-switch-button dev-icon'></i><span class="dev-text">{{$t('关闭系统')}}</span>
    </div>
    <el-dialog :close-on-click-modal='false' v-drag :title="titleList[type]" :v-if="dialogVisible" :visible.sync="dialogVisible" width="300px" @close='closeDialog'>
      <el-checkbox v-model="saveConf" style="margin-left:30px;">{{$t('保存配置')}}</el-checkbox>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit" size="small" class="addSubmit">{{$t('确 定')}}</el-button>
        <el-button @click="closeDialog" size="small" class="addClose">{{$t('取 消')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { powerOff, reboot } from '@/api/system/deviceManage'
import { saveSet, getTime } from '@/api/home'
export default {
  name: 'Dev',
  data () {
    return {
      dialogVisible: false,
      type: 'close',
      saveConf: false,
      titleList: {
        close: this.$t('关机前请选择以下设置'),
        restart: this.$t('重启前请选择以下设置')
      }
    }
  },
  mounted () {
    getTime()
  },
  methods: {
    systemOperation (type) {
      this.type = type
      this.dialogVisible = true
    },
    closeDialog () {
      this.dialogVisible = false
      this.saveConf = false
    },
    submit () {
      if (this.saveConf) {
        saveSet().then(res => {
          if (res.status === 0) {
            this.$message({
              message: this.$t('保存配置成功'),
              type: 'success'
            })
            if (this.type === 'close') {
              powerOff()
            } else if (this.type === 'restart') {
              reboot()
            }
          }
        })
      } else {
        if (this.type === 'close') {
          powerOff()
        } else if (this.type === 'restart') {
          reboot()
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
.deviceManageContont {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dev-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 100px;
  border-radius: 10px;
  margin: 20px 40px;
  color: #fff;
  font-weight: 600;
}

.dev-box:hover {
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  opacity: 0.9;
}

.dev-icon {
  font-size: 24px;
  font-weight: 600;
}

.dev-text {
  font-size: 20px;
  margin-left: 10px;
}
</style>
